<template>
  <div>
    <h4>计算属性</h4>
    <p>{{ sum }}</p>
    <div>
      <input type="checkbox" v-model="allCheck">
      <br>
      <input type="checkbox" v-for="item in list" v-model="item.c" :key="item.id">
    </div>
  </div>
</template>

<script setup>
import {computed, reactive} from "vue";

const arr = reactive([1,2,3,4]);
// 只能获取的计算属性
// computed接收一个getter函数作为参数，getter函数返回的值就是计算属性的值，computed的返回值就是这个计算属性
const sum = computed(()=>{
  return arr.reduce((prev,val)=>prev+val);
})

const list = reactive([{id:"1", c:true},{id:"2",c:false}]);

// 可以修改的计算属性
// computed接收一个对象作为参数，对象内通过定义get方法实现数据的计算，set方法实现数据的修改
const allCheck = computed({
  get(){
    return list.every(val=>val.c);
  },
  set(v){
    list.forEach(val=>val.c = v);
  }
})
</script>